<ion-view style="background: #383644;">
  <ion-nav-title>
    <span>个人主页</span>
  </ion-nav-title>
  <ion-content padding="false">
    <style>
      .tab_col_active {
        background-color: #FFAF17;
      }
    </style>
    <div style="text-align: center;background-image:url(img/background_2.png);background-repeat: no-repeat;background-size:cover">
      <img src="img/head.png" style="border-radius: 50%;
       border: 1px solid white; width: 100px; margin-top: 20px; margin-bottom: 15px;">
      <div class=row >
        <p style="color: white; font-size: 22px; margin-bottom: 30px;margin-left:100px">sunny大表姐</p>
        <img src="img/womanicon.png" style="width:25px;height:25px;position:relative;top:-3px;left:10px;">
      </div>

    </div>
    <div class="row"
         style="text-align: center; padding-left: 10%; padding-right: 10%;
          background-color: rgba(216,216,216,0.24); color: white; padding-top: 0; padding-bottom: 0;">
      <div class="col" ng-click="select_tab(1)" ng-class="{tab_col_active:selected(1)}"  >5<br>旅程</div>
      <div class="col" ng-click="select_tab(2)" ng-class="{tab_col_active:selected(2)}" >15<br>收藏</div>
      <div class="col" ng-click="select_tab(3)" ng-class="{tab_col_active:selected(3)}">77<br>关注</div>
      <div class="col" ng-click="select_tab(4)" ng-class="{tab_col_active:selected(4)}" >77<br>粉丝</div>
    </div>

    <!-- self routes -->
    <ion-list ng-show="selected(1)"  >
      <div class="item-dark card route-list" style="border-radius: 10px;" ng-repeat="route in selfRoutes">
        <div class="item item-avatar item-balanced" style="border-width: 0px; border-color: #FFAF17;border-radius: 10px;">
          <img src="{{route.who.headImage}}">
          <div class="row">
            <div class="col" style="position:relative;margin-top:-10px;margin-left:-15px">
              <h2>{{route.title}}</h2>
              <p><span>{{route.who.name}}  </span><span>{{route.when}}</span></p>
            </div>
            <img src="img/page_1.png" style="width:40px;height:10px">
          </div>
        </div>
        <ion-slide-box style="height: 200px;">
          <ion-slide ng-repeat="pic in route.pics">
            <div style="background-image:url({{pic}}); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
          </ion-slide>
        </ion-slide-box>
        <div class="row" style="text-align: center;background-color:#383644">
          <div class="button-bar">
            <img src="img/icon_1.png" style="width:25px;height:25px;position:relative;top:8px;left:13px;">
            <a class="button button-clear">收藏 21</a>
            <img src="img/icon_2.png" style="width:25px;height:25px;position:relative;top:8px;left:14px;">
            <a class="button button-clear">评论 18</a>
            <img src="img/icon_3.png" style="width:25px;height:25px;position:relative;top:8px;left:17px;">
            <a class="button button-clear">赞 55</a>
          </div>
        </div>
      </div>
    </ion-list>

    <!-- collection route -->
    <ion-list ng-show="selected(2)"  >
      <div class="item-dark card route-list" style="border-radius: 10px;" ng-repeat="route in selfRoutes">
        <div class="item item-avatar item-balanced" style="border-width: 0px; border-color: #FFAF17;border-radius: 10px;">
          <img src="{{route.who.headImage}}">
          <div class="row">
            <div class="col" style="position:relative;margin-top:-10px;margin-left:-15px">
              <h2>{{route.title}}</h2>
              <p><span>{{route.who.name}}  </span><span>{{route.when}}</span></p>
            </div>
            <img src="img/page_1.png" style="width:40px;height:10px">
          </div>
        </div>
        <ion-slide-box style="height: 200px;">
          <ion-slide ng-repeat="pic in route.pics">
            <div style="background-image:url({{pic}}); height: 100%;background-position: center;background-size:contain;background-repeat: no-repeat;"></div>
          </ion-slide>
        </ion-slide-box>
        <div class="row" style="text-align: center;background-color:#383644">
          <div class="button-bar">
            <img src="img/icon_1.png" style="width:25px;height:25px;position:relative;top:8px;left:13px;">
            <a class="button button-clear">收藏 21</a>
            <img src="img/icon_2.png" style="width:25px;height:25px;position:relative;top:8px;left:14px;">
            <a class="button button-clear">评论 18</a>
            <img src="img/icon_3.png" style="width:25px;height:25px;position:relative;top:8px;left:17px;">
            <a class="button button-clear">赞 55</a>
          </div>
        </div>
      </div>
    </ion-list>


    <!-- followings -->
    <ion-list ng-show="selected(3)">
      <a class="item item-dark item-avatar" ui-sref="app.home_other" ng-repeat="following in followings">
        <img src="{{following.headImage}}">
        {{following.name}}
        <img src="{{getGenderImage(following.gender)}}" style="width:25px;height:25px;position:relative;top:8px;left:5px;">
      </a>
    </ion-list>

    <!-- followers -->
    <ion-list ng-show="selected(4)">
      <a class="item item-dark item-avatar" ui-sref="app.home_other" ng-repeat="following in followers">
        <img src="{{following.headImage}}">
        {{following.name}}
        <img src="{{getGenderImage(following.gender)}}" style="width:25px;height:25px;position:relative;top:8px;left:5px;">
      </a>
    </ion-list>
  </ion-content>
</ion-view>
